<template>
    <div>
        <el-dialog
            title="授权"
            :visible.sync="dialogVisible">
            <div class="container list">
                <div class="container-header">
                    <p>账套名称: <span>{{names}}</span></p>
                </div>
                <div class="container-center">
                    <div class="content person">
                        <div class="title">
                            <p>有权访问人员</p>
                        </div>
                        <div class="detail">
                            <el-tag
                                v-for="(tag, index) in staffList"
                                :key="index"
                                @close="handleClose(tag, 'staff')"
                                >
                                {{tag.name}}
                            </el-tag>
                            <el-button class="button-new-tag" @click="add('staff')">+</el-button>
                        </div>
                    </div>
                    <div class="content role">
                        <div class="title">
                            <p>有权访问角色</p>
                        </div>
                        <div class="detail">
                            <el-tag
                                v-for="(tag, index) in roleList"
                                :key="index"
                                @close="handleClose(tag, 'role')"
                                >
                                {{tag.name}}
                            </el-tag>
                            <el-button class="button-new-tag" @click="add('role')">+</el-button>
                        </div>
                    </div>
                    <div class="content department">
                        <div class="title">
                            <p>有权访问部门</p>
                        </div>
                        <div class="detail">
                            <el-tag
                                v-for="(tag, index) in departmentList"
                                :key="index"
                                @close="handleClose(tag, 'department')"
                                >
                                {{tag.name}}
                            </el-tag>
                            <el-button class="button-new-tag" @click="add('department')">+</el-button>
                        </div>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="doSubmit()" v-noMoreClick
        >确定</el-button
        >
        <el-button size="small" @click="close()">取消</el-button>
      </span>
        </el-dialog>
        <staffForm ref="staffForm" @refreshDataList="getInfo"></staffForm>
        <roleForm ref="roleForm" @refreshDataList3="getInfo3"></roleForm>
        <departmentForm ref="departmentForm" @refreshDataList2="getInfo2"></departmentForm>
    </div>
</template>

<script>
    import staffForm from './staffForm'// 访问人员选择
    import roleForm from './roleForm'// 角色选择
    import departmentForm from './departmentForm'// 角色选择
    import {getAuthor} from '@/api/tenant/tenant.js'
export default {
        name: 'authorizeForm',
        components: {
            staffForm,
            roleForm,
            departmentForm
        },
      computed: {
      staffList () { // 可以监听对象的单个属性
        return this.$store.state.tentant.use
        }
      },
        data () {
            return {
                dialogVisible: false,
                names: '',

                roleList: [],
                departmentList: []
            }
        },
        methods: {
            getAuthor () {
            // this.$store.state.tentant.bookAuthorDTO.bookAuthorDTO.useId
            console.log(this.$store.state.tentant.bookAuthorDTO.bookAuthorDTO)
                getAuthor({
                useId: this.$store.state.tentant.bookAuthorDTO.bookAuthorDTO.useId,
                roleId: this.$store.state.tentant.bookAuthorDTO.bookAuthorDTO.roleId,
                officeId: this.$store.state.tentant.bookAuthorDTO.bookAuthorDTO.officeId
                //   bookId:this.$store.state.tentant.bookAuthorDTO.id
                }).then(res => {
                    this.roleList = res.data.page.roleList
                    console.log(res.data.page)
                this.departmentList = res.data.page.officeList

                this.$store.commit('tentant/setUse', res.data.page.userList)

                // this.selectedStaff=res.data.result.userList
                })
            },
            init (obj) {
                this.dialogVisible = true
                this.$store.state.tentant.bookAuthorDTO.bookAuthorDTO
                this.getAuthor()

            this.names = obj.names
                console.log(obj)
            },
            getInfo (e) {
                this.staffList = e
        },
            getInfo2 (e) {
                console.log(e)
                this.departmentList = e
        },
            getInfo3 (e) {
                this.roleList = e
        },
            // 关闭标签
            handleClose (tag, type) {
                console.log(type)

                if (type === 'staff') {
                    let selectedSyaffBuffer = JSON.parse(JSON.stringify(this.staffList))
                   // this.staffList.splice(this.staffList.indexOf(tag), 1)
                    for (let i = 0; i < this.$store.state.tentant.use.length; i++) {
                        if (tag.id === this.$store.state.tentant.use[i].id) {
                        console.log(i)
                        selectedSyaffBuffer.splice(i, 1)
                    this.$store.commit('tentant/setUse', selectedSyaffBuffer)
                        break
                        }
                    }
                } else if (type === 'role') {
                    // this.roleList.splice(this.roleList.indexOf(tag), 1)
                } else if (type === 'department') {
                    this.departmentList.splice(this.departmentList.indexOf(tag), 1)
                }
            },
            add (type) {
                if (type === 'staff') {
                    this.$refs.staffForm.init()
                } else if (type === 'role') {
                    this.$refs.roleForm.init()
                } else if (type === 'department') {
                    this.$refs.departmentForm.init()
                }
            },
            close () {
                this.dialogVisible = false
            }
        }
    }
</script>

<style lang="scss" scoped>
::v-deep .el-dialog{
    p{
      margin: 0;
    }
    .container.list{
        .container-header{
            margin-bottom: 10px;
        }
        .content{
            padding: 10px;
            width: 500px;
            border: 1px solid #AAAAAA;
            margin-bottom: 20px;
            min-height: 150px;
            .title{
                margin-bottom: 10px;
            }
            .button-new-tag {
                margin-left: 10px;
                height: 32px;
                line-height: 30px;
                padding-top: 0;
                padding-bottom: 0;
            }
        }
    }
}
</style>
